<!-- 用户详情 -->
<template>
  <div id="" class="">
    <div class="friendDetail mb10">
      <div class="headerbox">
        <span class="backIcon" @click="goback()">
          <img src="@/assets/arrow_left_white.png" alt="">
        </span>
        <h3>用户详情</h3>
      </div>

      <div>
        <img class="detialImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531913728925&di=b96a567b33ba9b1bed20b0ece4ea6676&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg" alt="">
        <div class="justify-content p10" align="center">
          <span>
            <img :src="imgUrlLink(userInfo.headPortrait)" alt="" class="headerUrl">
            <p class="name">{{userInfo.nickName}}
              <img src="@/assets/appointmentImage/woman_icon.png" width="16">
            </p>
          </span>
          <!-- 添加好友 -->
          <span class="mt20" @click="friendApply(userInfo.id)">
            <img src="@/assets/friendImage/Plusfriends.png" alt="" width="60">
          </span>
        </div>
        <div class="detailCon">
          <p class="mb10">{{userInfo.summary}}</p>
          <p class="mb10">手机号：{{userInfo.phone}}</p>
          <p class="mb10">等级：
            <img src="@/assets/indexImage/goldmedal_icon.png" alt="" width="10"> <em>{{userCoachLev(userInfo.ballAuth.coachLev)}}</em>
          </p>
          <p class="mb10">兴趣爱好：
            <span v-for="elem in userInfo.ballUserHobbys" :key="elem.key">{{elem}}</span>
          </p>
        </div>
      </div>
    </div>
    <tabNav :tabArr="tabArr" @tabEvent="tabNavEvent" class="bgWhite"></tabNav>
    <div class="">
      <activityItem v-for="elem in joinMatchList" :key="elem.key" :matchItem="elem"></activityItem>

    </div>
    <!-- <div class="">
      <activityItem></activityItem>
    </div> -->
  </div>
</template>
<script>
/**
用户详情，同用户信息查询
*/
import {getUserInfo,matchMyPartake,matchMyPush,circleApply} from '@/utils/ajaxRequest.js';

export default {
  name: "",
  data: () => ({
    tabArr:['参加赛事','发布赛事'],
    userId:'',
    userInfo:'',
    joinMatchList:[],
    // pushMatchList:[],
  }),
  components: {
    tabNav:()=>import('@/pages/members/template/tabNav'),
    activityItem:()=>import('./activityItem'),
  },
  methods: {
    // 图片地址拼接
    imgUrlLink(imgUrl) {
      return this.$imgUrlLink(imgUrl);
    },
    goback() {
      this.$router.go(-1);
    },
    tabNavEvent(data) {
      console.log(data);
      if(data==0) {
        this.getUserMatch();
      }else {
        this.getUserPushMatch();
      }
    },
    //获取用户信息
    getUserInfo() {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      let userParam = {
        token:xlyd_loginInfo.token,
        userId:self.userId
      }
      getUserInfo(userParam).then(res=>{
        console.log(res);
        if (res) {
          self.userInfo = res.data.result;
          self.getUserMatch();    //获取用户参加的赛事
        }
      })
    },
    // 教练等级
    userCoachLev(lev) {
       // 0银牌；1金牌
      switch (lev) {
        case 0:
          return '银牌教练'
          break;
        case 1:
          return '金牌教练'
          break;
        default:

      }
    },
    // 获取用户的参加赛事
    // 当前直接使用用户的token来获取数据
    getUserMatch() {
      let self = this;
      let userInfo = self.userInfo
      let userToken = userInfo.token;
      let matchParm = {
        token:userToken,
        userId:userInfo.id,
      }
      matchMyPartake(matchParm).then(res=>{
        console.log(res);
        if (res) {
          self.joinMatchList = res.data.result;
        }
      })
    },
    // 获取用户发布的赛事
    getUserPushMatch() {
      let self = this;
      let userInfo = self.userInfo
      let userToken = userInfo.token;
      let matchParm = {
        token:userToken,
        userId:userInfo.id,
      }
      matchMyPush(matchParm).then(res=>{
        console.log(res);
        if (res) {
          self.joinMatchList = res.data.result;
        }
      })
    },
    // 添加好友申请
    friendApply(userId) {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      if (!xlyd_loginInfo) {
        self.messageBox.confirm('请先登录~').then(active=>{
          self.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        })
      }else {   //已登录
        self.messageBox.confirm('确定给对方发送好友申请？').then(active=>{
          let applyParam = {
            token:xlyd_loginInfo.token,
            userId:userId
          }
          circleApply(applyParam).then(res=>{
            console.log(res);
            if(res) {
              self.toast(res.data.msg);
            }
          })
        }).catch(error=>{
          console.log(error);
        })
      }
    }
  },
  mounted() {
    //do something after mounting vue instance
    let userId = this.$route.query.userId;
    this.userId = userId;   //获取用户id
    this.getUserInfo();   //获取用户信息

    // let tabArr = this.tabArr;
    // let joinNum = 9;
    // let publishNum = 0;
    // tabArr[0] = '参加赛事 ('+joinNum+')';
    // tabArr[1] = '发布赛事 ('+publishNum+')';
    // this.tabArr = tabArr;
    this.$nextTick(()=>{
      console.log(this.joinMatchList.length);
    })
  }
}
</script>
<style lang="scss" scoped>
.friendDetail{
  margin-top: -40px;
  background: white;
  padding-bottom: 10px;
}
.headerbox{
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  .backIcon{
    position: absolute;
    left: 0px;
    top: 0px;
    padding:0 10px;
    img{
      width: 10px;
    }
  }
}
.detialImg{
  margin-bottom: -40px;
  width: 100%;
}
.headerUrl{
  width: 60px;
  height: 60px;
  border-radius: 100%;
  border:2px solid white;
}
.name{
  font-size: 18px;
}
.detailCon{
  padding: 0 20px;
  font-size: 12px;
  color: $lightColor;
  em{
    color: $yellowColor;
  }
  span{
    border:1px solid $blueColor;
    color: $blueColor;
    padding: 0 10px;
    border-radius: 20px;
  }
}
</style>
